<template>
    <div class="doctorContentHome">
        <Tabs :animated="false" v-model="tabId" @on-click="changeComponent">
            <TabPane :label="item.name" v-for="(item,index) of tabs" :key="item.id">
                <Row>
                    <Col :xs="24">
                    <div class="margin-up-down">
                            <Button type="info" @click="toAdd">
                                <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                            </Button>
                        </div>   
                        <div class="margin-up-down">
                            <Select class="w-select" clearable v-model="sonTab" placeholder="栏目">
                                <Option
                                    v-for="item in sonTabList"
                                    :value="item.id"
                                    :key="item.id"
                                    style='text-align:center;'
                                >{{item.name}}</Option>
                            </Select>
                        </div>
                        <div class="margin-up-down">
                        <Select class="w-select" clearable v-model="publicationStatus" placeholder="状态">
                            <Option
                                v-for="item in publicationStatusList"
                                :value="item.id"
                                :key="item.id"
                                style='text-align:center;'
                            >{{item.name}}</Option>
                        </Select>
                        </div>
                        <div class="margin-up-down">
                        <Input class="w-input" v-model="articleText" placeholder="请输入文章名称关键字" />
                        </div>
                        <div class="margin-up-down">
                            <Button type="primary" @click="loadPage(1)">
                                <Icon type="ios-search" size="14"/>
                            </Button>
                        </div>                    
                    </Col>
                </Row>
                <Table class="list-table" stripe :columns="columns" :data="datas"></Table>
                <div class="page">
                    <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
import { Tabs, TabPane } from "view-design";
import api from "@/api/commonApi";
export default {
    components: {
        Tabs,
        TabPane
    },
    data() {
        return {
            tabs: [
                { id: 1, name: "健康宣教" },
                { id: 3, name: "医学资讯" }
            ],
            tabId: 0,
            sonTabList: [],
            sonTab: null,
            publicationStatusList: [
                { id: 0, name: "禁用" },
                { id: 1, name: "启用" }
            ],
            publicationStatus: null,
            articleText: "",
            columns: [],
            datas: [],
            listApi: null,
            healthEducation: [
                { title: "排序", key: "iNum", align: "center", width: 60,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                { title: "标题", key: "title", align: "center", width: 200 },
                { title: "概要", key: "synopsis", align: "center", width: 220 },
                { title: "来源", key: "source", align: "center", width: 120 },
                {
                    title: "阅读量",
                    key: "readNum",
                    align: "center",
                    width: 80
                },
                {
                    title: "栏目",
                    key: "type",
                    align: "center",
                    // width: 140,
                    render: (h, params) => {
                        let typeText = "全部";
                        this.sonTabList.forEach(ele => {
                            if (ele.id == params.row.type) {
                                typeText = ele.name;
                            }
                        });
                        return h("span", {
                            domProps: {
                                innerHTML: typeText
                            }
                        });
                    }
                },

                {
                    title: "创建时间",
                    key: "createTime",
                    align: "center",
                    // width: 180
                },
                {
                    title: "状态",
                    key: "enable",
                    align: "center",
                    // width: 80,
                    render: (h, params) => {
                        let enable = params.row.enable,
                            btnText = "";
                        if (enable == 1) {
                            btnText = "启用";
                        } else {
                            btnText = "禁用";
                        }
                        return h("span", {
                            domProps: {
                                innerHTML: btnText
                            }
                        });
                    }
                },
                { title: "优先级", key: "showindex", align: "center", width: 80 },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 140,
                   // fixed: 'right',
                    render: (h, params) => {
                        let id = params.row.id;
                        let text = "";
                        let enable = null;
                        if (params.row.enable == 1) {
                            text = "禁用";
                            enable = 0;
                        } else {
                            text = "启用";
                            enable = 1;
                        }

                        return [
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.toEdit(id);
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            " | ",
                            h(
                                "a",
                                {
                                    on: {
                                        click: () => {
                                            this.changeEnable(
                                                params.index,
                                                params.row.id,
                                                api.updatehealArticle,
                                                enable
                                            );
                                        }
                                    }
                                },
                                text
                            )
                        ];
                    }
                }
            ],
            healthEducationSontab: [
                { id: 1, name: "最新" },
                { id: 2, name: "医生忠告" },
                { id: 3, name: "用药" },
                { id: 4, name: "日常" }
            ],
            healthEducationApi: api.findhealArticle,
            classicCase: [
                { title: "排序", key: "iNum", align: "center",
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                { title: "医生", key: "doctorName", align: "center" },
                { title: "职称", key: "title", align: "center" },
                { title: "科室", key: "dept", align: "center" },
                { title: "医院", key: "hospital", align: "center" },
                { title: "文章", key: "articleName", align: "center" },
                { title: "概要", key: "synopsis", align: "center" },
                {
                    title: "栏目",
                    key: "type",
                    align: "center",
                    render: (h, params) => {
                        let typeText = "全部";
                        this.sonTabList.forEach(ele => {
                            if (ele.id == params.row.type) {
                                typeText = ele.name;
                            }
                        });
                        return h("span", {
                            domProps: {
                                innerHTML: typeText
                            }
                        });
                    }
                },
                { title: "创建时间", key: "createTime", align: "center" },
                {
                    title: "状态",
                    key: "enable",
                    align: "center",
                    render: (h, params) => {
                        let enable = params.row.enable,
                            btnText = "";
                        if (enable == 1) {
                            btnText = "启用";
                        } else {
                            btnText = "禁用";
                        }
                        return h("span", {
                            domProps: {
                                innerHTML: btnText
                            }
                        });
                    }
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width:120,
                   // fixed: 'right',
                    render: (h, params) => {
                        let id = params.row.id;
                        let text = "";
                        let enable = null;
                        if (params.row.enable == 1) {
                            text = "禁用";
                            enable = 0;
                        } else {
                            text = "启用";
                            enable = 1;
                        }
                        return [
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.toEdit(id);
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            " | ",
                            h(
                                "a",
                                {
                                    on: {
                                        click: () => {
                                            this.changeEnable(
                                                params.index,
                                                params.row.id,
                                                api.doctorclassicUpdateFlag,
                                                enable
                                            );
                                        }
                                    }
                                },
                                text
                            )
                        ];
                    }
                }
            ],
            classicCaseSontab: [],
            classicCaseApi: api.findDoctorRecommendPage,
            hotRecommend: [
                { title: "排序", key: "iNum", align: "center",
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                { title: "文章", key: "title", align: "center" },
                { title: "概要", key: "recommend", align: "center" },
                { title: "来源", key: "source", align: "center" },
                { title: "创建时间", key: "createTime", align: "center" },
                {
                    title: "栏目",
                    key: "type",
                    align: "center",
                    render: (h, params) => {
                        let typeText = "全部";
                        this.sonTabList.forEach(ele => {
                            if (ele.id == params.row.type) {
                                typeText = ele.name;
                            }
                        });
                        return h("span", {
                            domProps: {
                                innerHTML: typeText
                            }
                        });
                    }
                },
                { title: "阅读数量", key: "readNum", align: "center" },
                {
                    title: "状态",
                    key: "enable",
                    align: "center",
                    render: (h, params) => {
                        let enable = params.row.enable,
                            btnText = "";
                        if (enable == 1) {
                            btnText = "启用";
                        } else {
                            btnText = "禁用";
                        }
                        return h("span", {
                            domProps: {
                                innerHTML: btnText
                            }
                        });
                    }
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    render: (h, params) => {
                        let id = params.row.id;
                        let text = "";
                        let enable = null;
                        if (params.row.enable == 1) {
                            text = "禁用";
                            enable = 0;
                        } else {
                            text = "启用";
                            enable = 1;
                        }
                        return [
                            h(
                                "a",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    on: {
                                        click: () => {
                                            this.toEdit(id);
                                        }
                                    }
                                },
                                "编辑"
                            ),
                            " | ",
                            h(
                                "a",
                                {
                                    on: {
                                        click: () => {
                                            this.changeEnable(
                                                params.index,
                                                params.row.id,
                                                api.updateDoctorRecommend,
                                                enable
                                            );
                                        }
                                    }
                                },
                                text
                            )
                        ];
                    }
                }
            ],
            hotRecommendSontab: [
                { id: 1, name: "头条" },
                { id: 2, name: "今日热点" },
                { id: 3, name: "医学前沿" },
                { id: 4, name: "宝宝喂养" },
                { id: 5, name: "科普" },
                { id: 6, name: "决策者说" }
            ],
            hotRecommendApi: api.findDoctorRecommendPage,
            count: 0,
            pageSize: 10,
            pageNo: 1
        };
    },
    created() {
        this.tabId = this.$route.query.tabId ? this.$route.query.tabId : 0;
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        this.sonTab = this.$route.query.sonTab
            ? parseInt(this.$route.query.sonTab)
            : null;
        this.publicationStatus =
            this.$route.query.publicationStatus == null
                ? null
                : parseInt(this.$route.query.publicationStatus);
        this.articleText = this.$route.query.articleText
            ? this.$route.query.articleText
            : "";

        this.tabId == 0 &&
            ((this.columns = this.healthEducation),
            (this.sonTabList = this.healthEducationSontab),
            (this.listApi = this.healthEducationApi));
        this.tabId == 1 &&
            ((this.columns = this.hotRecommend),
            (this.sonTabList = this.hotRecommendSontab),
            (this.listApi = this.hotRecommendApi));
        this.loadPage(pageNo);

        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/doctorOperation/medicalConsultation/home",
                title: "医生端运营"
            },
            {
                path: "/index/doctorOperation/medicalConsultation/home",
                title: "医学资讯运营管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    methods: {
        toAdd() {
            let tmpUrl = "";
            this.tabId == 0 &&
                (tmpUrl = "/index/doctorOperation/medicalConsultation/healthEducationEdit");
            this.tabId == 1 &&
                (tmpUrl = "/index/doctorOperation/medicalConsultation/medicalInfo");
            //   公用方法
            this.functionJS.queryNavgationTo(this, tmpUrl, {
                tabId: this.tabId,
                pageNo: this.pageNo,
                sonTab: this.sonTab,
                publicationStatus: this.publicationStatus,
                articleText: this.articleText
            });
        },
        toEdit(id) {
            let tmpUrl = "";
            this.tabId == 0 &&
                (tmpUrl = "/index/doctorOperation/medicalConsultation/healthEducationEdit");
            this.tabId == 1 &&
                (tmpUrl = "/index/doctorOperation/medicalConsultation/medicalInfo");
            //   公用方法
            this.functionJS.queryNavgationTo(this, tmpUrl, {
                id,
                tabId: this.tabId,
                pageNo: this.pageNo,
                sonTab: this.sonTab,
                publicationStatus: this.publicationStatus,
                articleText: this.articleText
            });
        },
        changeEnable(index, id, url, enable) {
            let engable = null;
            this.$axios
                .post(url, {
                    id,
                    enable
                })
                .then(res => {
                    if (res.data.success) {
                        this.datas[index].enable = enable;
                    } else {
                        this.$Message.info("修改状态失败,请重试");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        changeComponent(index) {
            this.tabId = index;
            this.pageNo = 1;
            this.sonTab = null;
            this.publicationStatus = null;
            this.articleText = "";
            this.tabId == 0 &&
                ((this.columns = this.healthEducation),
                (this.sonTabList = this.healthEducationSontab),
                (this.listApi = this.healthEducationApi));
            this.tabId == 1 &&
                ((this.columns = this.hotRecommend),
                (this.sonTabList = this.hotRecommendSontab),
                (this.listApi = this.hotRecommendApi));
            this.loadPage(1);
        },
        //加载列表数据
        loadPage(pageNo) {
            this.pageNo = pageNo;
            var params = {};
            params.type = this.sonTab ? parseInt(this.sonTab) : null;
            params.enable = this.publicationStatus;
            params.searchKey = this.articleText.trim();
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(this.listApi, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        let dataList = resp.data.object.records;
                        for (let key in dataList) {
                            dataList[key].iNum = parseInt(key) + 1;
                        }
                        this.datas = dataList;
                    } else {
                        console.log("网络连接失败");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped lang = "less">
.doctorContentHome {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 200px;
    }
    .list-table {
        margin-top: 15px;
    }
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .page{
        text-align: center;
        margin: 20px 0;
    }
}
</style>